<template>
    <div id="lastes-articles">
        <template v-for="(item,index) in articleList">
            <div
                :key="item._id"
                class="lastes-articles-item"
            >
                <div
                    class="title"
                    v-text="item.title"
                ></div>
                <div class="content">
                    <div class="img">
                        <img
                            v-lazy="item.coverImagesUrl"
                            alt=""
                        >
                    </div>
                    <div
                        class="line-ellipsis con"
                        v-text="item.synopsis"
                    ></div>
                </div>
                <div class="spaceBetween info">
                    <div class="left">
                        <div class="center">
                            <img
                                src="~assets/images/newsbg02.png"
                                alt=""
                            >
                            <span v-text="item.date"></span>
                        </div>
                        <div class="center">
                            <img
                                src="~assets/images/newsbg04.png"
                                alt=""
                            >
                            <span>浏览 (<span
                                class="read"
                                v-text="item.readingTimes"
                            ></span>)</span>
                        </div>
                        <div class="center">
                            <img
                                src="~assets/images/like.jpg"
                                alt=""
                            >
                            <span>喜欢 (<span
                                class="read"
                                v-text="item.likes"
                            ></span>)</span>
                        </div>
                    </div>
                    <div
                        class="read center pointer right"
                        @click="showArticleDetail(index,item)"
                    >
                        阅读全文>>
                    </div>
                </div>
            </div>
        </template>
        <div
            v-if="articleList.length <= 0"
            class="center no-data"
        >
            暂无数据
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            type: {
                type: String,
                default: '/index'
            },
            articleList: {
                type: Array,
                default: () => []
            }
        },
        data () {
            return {

            };
        },
        methods: {
            /**
             * 查看文件详情
             * @param {Number} index 索引
             * @param {Object} row 当前文章信息
             */
            showArticleDetail (index, row) {
                this.$router.push({
                    path: `${ this.type }/articleDetail`,
                    query: {
                        articleId: row._id
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#lastes-articles{
    padding: 0 10px;
    .lastes-articles-item{
        padding-top: 10px;
        &:not(:last-of-type){
            border-bottom: 1px solid #ccc;
        }
        .title{
            line-height: 50px;
            font-weight: bold;
        }
        .content {
            display: flex;
            height: 114px;
            &:hover {
                img{
                    transform: scale(1.1);
                }
                .con {
                    color: @color-text;
                }
            }
            .img{
                width: 225px;
                flex-shrink: 0;
                margin-right: 20px;
                border-radius: 6px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    transition: all .5s ease;
                }
            }
            .con{
                flex-grow: 1;
                padding-top: 10px;
                line-height: 26px;
                color: @color-text-g;
                font-size: @font-size-medium;
            }
        }
        .info{
            height: 40px;
            padding: 0 5px;
            .left{
                display: flex;
                align-items: center;
                >div{
                    margin-right: 15px;
                    font-size: @font-size-medium;
                    color: @color-text-g;
                    img{
                        margin-right: 6px;
                    }
                }
            }
        }
    }
}
</style>
